<template>
	<view :style="theme" class="page">
		<view class="container">
			<view class="head" style="margin-bottom: 20rpx;">当前主题: {{ currentTheme }}</view>
			<view class="main">
				<view class="theme-item" v-for="(theme,index) in themesKey" :key="index"
					:style="{ 'background-color': themeData[theme].bgColor, 'color': themeData[theme].textColor }"
					@click="changeTheme(theme)">点击切换<br /><!-- {{themesName[index]}} -->主题</view>
			</view>
		</view>
	</view>
</template>

<script>
	import themes from '@/store/theme.js'
	export default {
		data() {
			return {
				themeData: themes,
				themesKey: Object.keys(themes),
				themesName: []
			}
		},
		computed: {
			currentTheme() {
				return this.$store.getters.currentTheme;
			}
		},
		onShow() {
			this.themesName = []
			this.themesKey.forEach(key => {
				this.themesName.push(themes[key].name)
			});
			console.log('主题皮肤', this.themesKey)
		},
		methods: {
			changeTheme(theme) {
				console.log('主题颜色改变了', theme)
				this.$store.commit("changeTheme", theme)
				this.$sucessToast('换肤成功')
				// 重新回到我的页面
				setTimeout(function() {
					uni.reLaunch({
						url: '/pages/User/User' // 假设要刷新的页面是index页面
					});
				}, 1000)

				console.log('获取主题颜色', this.$store.state)
			}
		}
	}
</script>

<style scoped lang="scss">
	.page {
		background-color: $bg-color;
		height: 100vh;
	}

	.container {
		width: 100vw;
		height: 100vh;
		//background: linear-gradient(to bottom, blue, green);
	}

	.head {
		height: 100rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 36rpx;
		/* #ifdef H5 */
		padding-top: 15rpx;
		/* #endif */
		/* #ifdef MP-WEIXIN */
		padding-top: 75rpx;
		/* #endif */
		color: $text-color;
	}

	.main {
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-start;
		margin-top: 10rpx;
	}

	$border-radius: 20rpx;
	$border-color: #eee;
	$item-margin-left: 6%;
	$item-margin-top: 20rpx;
	$item-width: 17%;

	.theme-item {
		width: $item-width;
		margin-left: $item-margin-left;
		margin-top: $item-margin-top;
		background-color: #fff;
		padding: 30rpx 0rpx;
		border-radius: 20rpx;
		border: solid 1rpx $border-color;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		text-align: center;
		font-size: 26rpx;
	}

	.footer {
		height: 90rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		position: fixed;
		width: 100%;
		font-size: 28rpx;
		/* #ifdef H5 */
		bottom: 15rpx;
		/* #endif */
		/* #ifdef MP-WEIXIN */
		bottom: 35rpx;
		/* #endif */
		color: $text-color;
	}
</style>